<template>
    <view>
        <view class="padding-top-32 padding-left-32 padding-right-32">
            <view class="flex align-center justify-between">
                <view v-if="vuex_token" class="flex align-center">
                    <image :src="vuex_user.avatar" class="head-img-class"></image>
                    <text class="head-name">{{ vuex_user.nickname }}</text>
                </view>
                <view v-else @click="goPage('/pages/setting/index', true)" class="flex align-center">
                    <image src="https://txr001.zthj.net/static/img/avatar.png" class="head-img-class"></image>
                    <text class="head-name" @click="goPage('/pages/login/selLogin')">登录青牒</text>
                </view>
                <view @click="goPage('/pages/setting/index', true)">
                    <image src="https://txr001.zthj.net/static/img/setting.png" class="notice-img"></image>
                </view>
            </view>
            <!-- <view class="mine-new-content">
                <view class="flex align-center justify-between">
                    <view class="bg-centent margin-right-sm" @click="dialog()"
                        :style="[{ backgroundImage: 'url(https://txr001.zthj.net/newImg/minebg1.png)' }]">
                        <view class="flex align-center justify-between">
                            <view class="title">青牒会员</view>
                            <view>
                                <button class="open-btn cu-btn">开通</button>
                            </view>
                        </view>
                        <view class="title-desc">开通会员，享全部特权</view>
                    </view>
                    <view class="bg-centent" @click="goPage('/pages/carAccount/recharge', true)"
                        :style="[{ backgroundImage: 'url(https://txr001.zthj.net/newImg/minebg2.png)' }]">
                        <view class="flex align-center justify-between">
                            <view class="title">数据能量</view>
                            <view>
                                <button class="open-btn cu-btn">充值</button>
                            </view>
                        </view>
                        <view class="title-desc">能量：{{ vuex_user.energy || 0 }}</view>
                    </view>
                </view>
                <view class="flex align-center justify-between margin-top">
                    <view class="dh-text">兑换码</view>
                    <view>
                        <input v-model="exchangenmber" class="dh-input" placeholder="请输入兑换码" name="input"></input>
                    </view>
                    <view>
                        <button class="dh-btn cu-btn" @click="exchange">兑换</button>
                    </view>
                </view>
            </view> -->
            <!-- v-if="!vuex_token" -->
            <view class="margin-top-42 flex align-center justify-between" v-if="!vuex_token">
                <view @click="showModal" class="mine-login-centent"
                    :style="[{ backgroundImage: 'url(https://txr001.zthj.net/static/img/mine-up1.png)' }]">
                    <view class="text-white text-sm">添加企业&机构</view>
                    <view class="padding-top-32 text-center">
                        <image src="https://txr001.zthj.net/static/img/mineAdd.png" class="img-136"></image>
                    </view>
                </view>
                <!-- <view @click="goPage('/subpackage/pages/mine/addObject', true)" class="mine-login-centent"
                    :style="[{ backgroundImage: 'url(https://txr001.zthj.net/static/img/mine-up2.png)' }]">
                    <view class="text-white text-sm">添加上传数据对象</view>
                    <view class="padding-top-32 text-center">
                        <image src="https://txr001.zthj.net/static/img/mineUp.png" class="img-136"></image>
                    </view>
                </view> -->
            </view>
            <view class="margin-top-32 flex" v-else>

                <view class="flex-sub">
                    <view @click="showModal" v-if="!basicInfo.id && tradeList.length == 0" class="mine-login-centent"
                        :style="[{ backgroundImage: 'url(https://txr001.zthj.net/static/img/mine-up1.png)' }]">
                        <view class="text-white text-sm">绑定企业&机构</view>
                        <view class="padding-top-32 text-center">
                            <image src="https://txr001.zthj.net/static/img/mineAdd.png" class="img-136"></image>
                        </view>
                    </view>

                    <view class="mine-left-content setContent" v-if="basicInfo.id"
                        :class="tradeList.length == 0 ? 'basicInfoContent' : ''">
                        <view v-if="tradeList.length"
                            class="flex align-center justify-between padding-bottom-14 solid-bottom">
                            <view class="mine-all-title">
                                数据关联企业
                            </view>
                            <view class="mine-all-number">
                                {{ tradeList.length }}
                            </view>
                        </view>
                        <view class="margin-bottom-42" v-for="(item, index) in tradeList" :key="index">
                            <view class="obj-name text-cut">
                                {{ item.company_name }}
                            </view>
                            <view class="obj-memo">
                                {{ item.memo || '暂无描述' }}
                            </view>
                        </view>
                        <view v-if="tradeList.length > 0" class="obj-more"
                            @click="goPage('/subpackage/pages/voucher/dataAssociation', true)">
                            更多 》
                        </view>

                        <view v-if="tradeList.length == 0" @click="goPage('/subpackage/pages/mine/addObject', true)"
                            class="mine-login-centent "
                            :style="[{ backgroundImage: 'url(https://txr001.zthj.net/static/img/mine-up2.png)' }]">
                            <view class="text-white text-sm">添加数据关联组织</view>
                            <view class="padding-top-32 text-center">
                                <image src="https://txr001.zthj.net/static/img/mineUp.png" class="img-136"></image>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- class="flex-sub" -->
                <!-- <view>
                    <view v-if="!basicInfo.id && tradeList.length == 0"
                        @click="goPage('/subpackage/pages/mine/addObject', true)" class="mine-login-centent "
                        :style="[{ backgroundImage: 'url(https://txr001.zthj.net/static/img/mine-up2.png)' }]">
                        <view class="text-white text-sm">添加数据关联组织</view>
                        <view class="padding-top-32 text-center">
                            <image src="https://txr001.zthj.net/static/img/mineUp.png" class="img-136"></image>
                        </view>
                    </view>
                    <view class="mine-left-content mine-left-content_new" v-if="basicInfo.id">
                        <view class="mine-left-content_new">
                            <image :src="basicInfo.logo ? basicInfo.logo : 'https://txr001.zthj.net/static/img/comLogo.png'"
                                class="img-32 text-img-center"></image>
                            <text class="text-0101 text-bold-600 text-sm text-img-center padding-left-12">{{
                                basicInfo.company_name }}</text>
                        </view>
                        <view v-if="basicInfo.status == 'normal'"
                            @click="goPage('/subpackage/pages/mine/company/baseInfoComplate', true)">
                            <image src="https://txr001.zthj.net/static/img/comRz.png"
                                class="img-48 margin-top-32 mine-left-content_new"></image>
                            <view class="flex margin-top-8 align-center justify-between">
                                <view class="text-0101 text-24 mine-left-content_new">已认证</view>
                                <view class="setImage">
                                    <image src="https://txr001.zthj.net/static/img/right.png" class="img-32"></image>
                                </view>
                            </view>
                        </view>

                        <view v-if="basicInfo.status == 'hidden'" @click="toAddCompany('G')">
                            <image src="https://txr001.zthj.net/ces/Slice%201.png"
                                class="img-48 margin-top-32 mine-left-content_new"></image>
                            <view class="flex margin-top-8 align-center justify-between">
                                <view class="text-0101 text-24 mine-left-content_new">认证中</view>
                                <view class="setImage">
                                    <image src="https://txr001.zthj.net/static/img/right.png" class="img-32"></image>
                                </view>
                            </view>
                        </view>

                        <view v-if="basicInfo.status == 'reject'">
                            <image src="https://txr001.zthj.net/ces/Frame.png"
                                class="img-48 margin-top-32 mine-left-content_new"></image>
                            <view class="flex margin-top-8 align-center justify-between">
                                <view class="text-0101 text-24 mine-left-content_new">认证失败</view>
                                <view class="setImage">
                                    <image src="https://txr001.zthj.net/static/img/right.png" class="img-32"></image>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="margin-top-32  flex">
                        <view class="flex-sub">
                        </view>
                        <view v-if="!basicInfo.logo" class="flex-sub" @click="handleMethodNull">
                            <view class="add-company">
                                <image src="https://txr001.zthj.net/static/img/addIMg.png" class="img"></image>
                            </view>
                            <view class="add-company-bottom">
                                {{ '请描述企业概况' }}
                            </view>
                        </view>
                        <view v-if="basicInfo.logo" class="flex-sub" @click="handleMethodBtn">
                            <view class="add-company">
                                <image :src="basicInfo.bg_image" class="img images"></image>
                            </view>
                            <view class="add-company-bottom setadd-company-bottom">
								<view class="textCon">
									{{ basicInfo.memo }}
								</view>                                
                            </view>
                        </view>
                    </view>
                </view> -->
            </view>
        </view>
        <!-- <view class="cu-modal" :class="modalName == 'center' ? 'show' : ''" @tap="hideModal">
            <view class="cu-dialog text-left">
                <view class="company-bg-content"
                    :style="[{ backgroundImage: 'url(https://txr001.zthj.net/static/img/comBg.png)' }]">
                    <view class="title">企业/组织</view>
                    <view class="title-desc">ORGANIZATION</view>
                    <view class="text-df text-0101 padding-top-24">选择身份</view>
                    <view class="btn-content">
                        <button class="cu-btn upload-btn"
                            @click="goPage('/subpackage/pages/mine/company/baseInfo?type=1', true)">负责人/代表</button>
                        <button class="cu-btn upload-btn" @click="toAddEmp('C')">工作人员</button>
                    </view>
                </view>
                <view class="company-bg-content margin-top-32"
                    :style="[{ backgroundImage: 'url(https://txr001.zthj.net/static/img/orgBg.png)' }]">
                    <view class="title">政府/管理部门</view>
                    <view class="title-desc">GOVERNMENT / ADMINISTRATION</view>
                    <view class="text-df text-0101 padding-top-24">选择身份</view>
                    <view class="btn-content">
                        <button class="cu-btn upload-btn"
                            @click="goPage('/subpackage/pages/mine/company/baseInfo?type=2', true)">负责人/代表</button>
                        <button class="cu-btn upload-btn" @click="toAddEmp('G')">工作人员</button>
                    </view>
                </view>
            </view>
        </view>
        <view class="cu-modal" :class="modalName == 'openSuccess' ? 'show' : ''" @click="hideModel">
            <view class="cu-dialog">
                <view>
                    <image v-if="isok" src="https://txr001.zthj.net/newImg/ktScLogo.png" class="img-268"></image>
                    <image v-else src="https://txr001.zthj.net/voucher_img/xxx.png" class="img-268"></image>
                </view>
                <view class="ewbbg-img" v-if="isok"
                    :style="[{ backgroundImage: 'url(https://txr001.zthj.net/newImg/ktScBg.png)' }]">
                    <view class="text-center">
                        <view class="text-success-title">恭喜您兑换成功</view>
                        <view class="text-success-desc">您已兑换成功，可在在「我的-会员」中查看</view>
                    </view>
                    <view>
                        <button class="cu-btn sure-btn" @click="hideModal">确认</button>
                    </view>
                </view>
                <view class="ewbbg-img" v-else
                    :style="[{ backgroundImage: 'url(https://txr001.zthj.net/voucher_img/backgroundblack.png)' }]">
                    <view class="text-center">
                        <view class="text-success-title">兑换码失败</view>
                        <view class="text-success-desc">请确认您的兑换码是否正确</view>
                    </view>
                    <view>
                        <button class="cu-btn sure-btnno" @click="hideModal">确认</button>
                    </view>
                </view>
            </view>
        </view> -->
        <view class="btn" v-if="showModalTip" @click="btn">
            <view class="mask" bindtap="close">
                <view class="personnel-top" :isBack="true">
                    <image src="https://txr001.zthj.net/static/icon/default.png" class="icon-img"></image>
                    <view class="jqqd">敬请期待</view>
                    <view class="text-767879 text-sm margin-top-8">
                        功能正在建设中……
                    </view>
                </view>
            </view>
        </view>
        <view style="height: 150rpx;"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            exchangenmber: "",
            isok: false,
            searchBarTop: 0, //搜索栏的外边框高度，单位px
            searchBarHeight: 0,
            user: "",
            modalName: null,
            basicInfo: {},
            tradeList: [],
            showModalTip: false
        }
    },
    onLoad() {
        // #ifndef H5 || APP-PLUS || MP-ALIPAY
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
        this.searchBarTop = menuButtonInfo.top;
        this.searchBarHeight = menuButtonInfo.height;
        // #endif
    },
    onShow() {
        console.log('this',this)
        console.log('this.$u',this.$u)
        // #ifndef H5 || APP-PLUS || MP-ALIPAY
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
        this.searchBarTop = menuButtonInfo.top;
        this.searchBarHeight = menuButtonInfo.height;
        // #endif
        if (this.vuex_token) {
            this.getUserIndex();
            this.getBaseList();
            this.getTradeList();

        } else {
            this.$u.vuex('vuex_user', {});
        }
    },
    methods: {
        // 跳转企业详情
        handleMethodBtn() {
            uni.navigateTo({
                url: `/pages/mine/companyInfo?setting=${this.basicInfo.bg_image}&logo=${this.basicInfo.logo}&memo=${this.basicInfo.memo}&company=${this.basicInfo.company_name}`
            })
        },
        //跳转到添加页面
        handleMethodNull() {
            uni.navigateTo({
                url: `/pages/mine/companyInfo?company=${this.basicInfo.company_name}&logo=${this.basicInfo.logo}`
            })
        },
        async getTradeList() {
            let res = await this.$api.association();
            if (!res.code) {
                this.$u.toast(res.msg);
                return;
            }
            this.tradeList = res.data.list;
        },
        exchange() {
            if (!this.exchangenmber) {
                this.$u.toast('请填写兑换码');
                return;
            }
            if (this.exchangenmber) {
                this.isok = true
            } else {
                this.isok = false
            }
            this.modalName = 'openSuccess';
			this.exchangenmber = ''
        },
        hideModel() {
            this.modalName = ""
        },
        btn() {
            this.showModalTip = false
        },
        dialog() {
            this.showModalTip = !this.showModalTip
        },
        showModal(e) {
            if (!this.vuex_token) {
                this.goPage('/pages/login/selLogin');
                return;
            }
            this.modalName = 'center'
        },
        hideModal(e) {
            this.modalName = null
        },
        toAddEmp(type) {
            uni.navigateTo({
                url: "/subpackage/pages/mine/empInfo?type=" + type
            })
        },

        toAddObject() {
            uni.navigateTo({
                url: "/subpackage/pages/mine/addObject"
            })
        },
        // 数据关联
        toDataAss() {
            uni.navigateTo({
                url: "/subpackage/pages/mine/dataAssociation"
            })
        },
        getUserIndex: async function () {
            let res = await this.$api.getUserIndex();
            uni.stopPullDownRefresh();
            if (!res.code) {
                this.$u.toast(res.msg);
                return;
            }
            this.$u.vuex('vuex_user', res.data.userInfo || {});
        },
        // 获取基础数据列表
        async getBaseList() {
            let res = await this.$api.basicdetail();
            this.basicInfo = res && res || {}
            console.log(this.basicInfo, 'this.basicInfo.status')
        }
    }
}
</script>
<style>
page {
    background: #F5F5F5;
}
</style>
<style scoped lang="less">
.index-logo {
    width: 124rpx;
    height: 64rpx;
}

.btn {
    width: 100%;
    height: 100%;
    padding: 6%;

    .mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.4);

    }

    .personnel-top {
        width: 484rpx;
        height: 484rpx;
        background: #FFFFFF;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        opacity: 1;
        text-align: center;

        .icon-img {
            margin-top: 130rpx;
            width: 42px;
            height: 58.39px;
        }

        .jqqd {
            margin-top: 40rpx;
            font-size: 16px;
            color: #000000;
        }
    }

    .personnel-top-value {
        width: 220px;
        height: 142px;
        background: #FFFFFF;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        opacity: 1;
        text-align: center;

        .jqqd {
            margin-top: 40rpx;
            font-size: 14px;
            color: #000000;
            padding: 8%;
            border-bottom: 1px solid #ccc;
        }

        .button {
            line-height: 50px;

            .xian {
                width: 1px;
                height: 47px;
                background-color: #ccc;
                margin-top: -5px;
            }
        }
    }
}

.top-search-btn {
    text-align: center;
    position: absolute;
    width: 100%;
}

.head-img-class {
    width: 96rpx;
    height: 96rpx;
    vertical-align: middle;
    border-radius: 100%;
}

.head-name {
	width: 400rpx;
	height: 68rpx;
    font-size: 48rpx;
    font-weight: 400;
    color: #010101;
    vertical-align: middle;
    padding-left: 24rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;	
}

.notice-img {
    width: 48rpx;
    height: 48rpx;
}

.mine-login-centent {
    background-size: 100% 100%;
    width: 328rpx;
    height: 258rpx;
    padding: 24rpx 24rpx 32rpx;
    border-radius: 40rpx;
    // margin-left: -20rpx;
    // margin-top: -20rpx;
}

.mine-left-content {
    background: #FFFFFF !important;
    border-radius: 48rpx;
    box-sizing: border-box;
    padding: 24rpx 0rpx 24rpx 0rpx;
    width: 328rpx;
}

.mine-all-title {
    font-family: PingFang SC, PingFang SC;
    line-height: 36rpx;
    padding: 2rpx;
    font-size: 24rpx;
    font-weight: 800;
    color: #010101;
}

.mine-all-number {
    padding: 0 8rpx;
    height: 28rpx;
    line-height: 28rpx;
    background: #010101;
    border-radius: 17rpx;
    font-size: 20rpx;
    font-weight: 600;
    color: #FFFFFF;
}

.obj-name {
    font-size: 26rpx;
    line-height: 34rpx;
    font-weight: 600;
    color: #010101;
    font-family: PingFang SC, PingFang SC;
    margin-top: 32rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.obj-memo {
    font-size: 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #767879;
    line-height: 22rpx;
    margin-top: 8rpx;
    overflow: hidden;
    text-overflow: ellipsis;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.obj-more {
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    color: #010101;
    line-height: 34rpx;
    text-align: center;
}

.tradeList-empty {
    text-align: center;
    padding: 20rpx 0;
}

.obj-desc {
    height: 26rpx;
    border-radius: 18rpx;
    border: 2rpx solid #010101;
    padding: 0 8rpx;
    font-size: 16rpx;
    font-weight: 400;
    color: #010101;
}

.company-bg-content {
    background-size: 100% 100%;
    width: 680rpx;
    height: 312rpx;
    padding: 40rpx;

    .title {
        font-size: 48rpx;
        font-weight: 600;
        color: #010101;
    }

    .title-desc {
        padding-top: 8rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #DEE0E1;
    }

    .btn-content {
        margin-top: 12rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .upload-btn {
            width: 260rpx;
            height: 64rpx;
            background: #24458E;
            border-radius: 39rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: #FFFFFF;
        }
    }
}

.mine-new-content {
    margin-top: 58rpx;
    background: #FFFFFF;
    border-radius: 48rpx;
    opacity: 0.96;
    padding: 24rpx;

    .bg-centent {
        background-size: 100% 100%;
        width: 100%;
        height: 140rpx;
        padding: 28rpx 16rpx;

        .title {
            font-size: 32rpx;
            font-weight: 500;
            color: #1B3164;
        }

        .title-desc {
            padding-top: 12rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #1B3164;
        }

        .open-btn {
            width: 92rpx;
            height: 40rpx;
            background: #FFFFFF;
            border-radius: 26rpx;
            opacity: 0.96;
            font-size: 20rpx;
            font-weight: 500;
            color: #2D5CD3;
        }
    }

    .dh-text {
        font-size: 24rpx;
        font-weight: 600;
        color: #010101;
    }

    .dh-input {
        margin-left: 20rpx;
        width: 390rpx;
        height: 52rpx;
        background: #FFFFFF;
        border-radius: 10rpx;
        border: 2rpx solid #D9D9D9;
        padding-left: 20rpx;
    }

    .dh-btn {
        width: 126rpx;
        height: 52rpx;
        background: #88ACFF;
        border-radius: 26rpx;
        opacity: 0.96;
        font-size: 24rpx;
        font-weight: 500;
        color: #FFFFFF;
    }
}

.ewbbg-img {
    background-size: 100% 100%;
    width: 686rpx;
    height: 466rpx;
    margin-top: -168rpx;

    .text-success-title {
        padding-top: 166rpx;
        font-size: 48rpx;
        font-weight: 600;
        color: #222222;
    }

    .text-success-desc {
        padding-top: 14rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #ACB4B6;
    }

    .sure-btn {
        margin-top: 64rpx;
        width: 304rpx;
        height: 88rpx;
        background: #24458E;
        border-radius: 49rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #FFFFFF;
    }

    .sure-btnno {
        margin-top: 64rpx;
        width: 304rpx;
        height: 88rpx;
        background: #FF5D48;
        border-radius: 49rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #FFFFFF;
    }
}

.add-company {
    width: 328rpx;
    height: 328rpx;
    background: #ECECEC;
    border-radius: 48rpx 48rpx 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;

    .img {
        width: 88rpx;
        height: 88rpx;
    }

    .images {
        width: 100%;
        height: 100%;
        border-radius: 48rpx 48rpx 0px 0px;
    }
}

.add-company-bottom {
    width: 328rpx;
    background-color: #FFFFFF;
    border-radius: 0rpx 0rpx 48rpx 48rpx;
    padding: 24rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #D5D8D9;
}

.mine-left-content_new {
    display: block;
    margin-left: 20rpx;
}

.basicInfoContent {
    background-color: #F5F5F5 !important;
}

.setadd-company-bottom {
	width: 328rpx;
	max-height: 150rpx;
	.textCon{
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		color: #010101;
		line-height: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
}

.setContent {
    padding: 24rpx;
}

.setImage {
    margin-right: 20rpx;
}
</style>